<template>
  <el-select style="width:100%" filterable v-model="model" v-bind="$attrs" clearable v-on="$listeners">
    <template v-for="(item) of options">
        <el-option  :key="item.value" :label="item.dictLabel" :value="item.dictValue"></el-option>
    </template>
  </el-select>
</template>

<script>
import { getDicts as getDicts } from '@/api/system/dict/data'
export default {
  model: {
    prop: "value",
    event: "change"
  },
  data() {
    return {
        options:[]
    }
  },
  props: {
    value: {
      type: [String, Number],
      default: undefined
    },
    dict: {
      type: String,
      required: true
    },
  },
  computed: {
    model: {
      get() {
        return this.value?String(this.value):void 0
      },
      set(value) {
        this.$emit("change", value)
      }
    }
  },
  watch: {
  },
  async mounted() {
    this.options = await this.getDicts();
  },
  methods: {
    getDicts(){
        return new Promise((resolve,reject)=>{
            getDicts(this.dict).then(res => {
                resolve(res.data)
            }).catch(error => {
                reject(error)
            })
        })
    }
  }
}
</script>

<style>
</style>